<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
				border: 0;
			}
			
			.all {
				width: 500px;
				height: 200px;
				padding: 7px;
				border: 1px solid #ccc;
				margin: 100px auto;
				position: relative;
			}
			
			.screen {
				width: 500px;
				height: 200px;
				overflow: hidden;
				position: relative;
			}
			
			.screen li {
				width: 500px;
				height: 200px;
				overflow: hidden;
				float: left;
			}
			
			.screen ul {
				position: absolute;
				left: 0;
				top: 0px;
				width: 3000px;
			}
			
			.all ol {
				position: absolute;
				right: 10px;
				bottom: 10px;
				line-height: 20px;
				text-align: center;
			}
			
			.all ol li {
				float: left;
				width: 20px;
				height: 20px;
				background: #fff;
				border: 1px solid #ccc;
				margin-left: 10px;
				cursor: pointer;
			}
			
			.all ol li.current {
				background: yellow;
			}
			/*#arr {display: none;}*/
			
			#arr span {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top: 50%;
				margin-top: -20px;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: '黑体';
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
			
			#arr #right {
				right: 5px;
				left: auto;
			}
		</style>
	</head>

	<body>
		<div class="all" id='all'>
			<div class="screen" id="screen">
				<ul id="ul">
					<li><img src="img/1.jpg" width="500" height="200" /></li>
					<li><img src="img/2.jpg" width="500" height="200" /></li>
					<li><img src="img/3.jpg" width="500" height="200" /></li>
					<li><img src="img/4.jpg" width="500" height="200" /></li>
					<li><img src="img/5.jpg" width="500" height="200" /></li>
				</ul>
				<ol></ol>
				<div id="arr"><span id="left"><</span><span id="right">></span></div>
			</div>
		</div>
		<script type="text/javascript">
			function carousel(box,btn_left,btn_right){
				//获取大盒子
				this.box = document.querySelector(box);
				//获取ul
				this.ul = document.querySelector(box+" ul");
				//获取ol
				this.ol = document.querySelector(box+" ol");
				//获取ul的孩子
				this.ul_liArr = this.ul.children;
				//定义一个ol孩子的数组
				this.ol_liArr;
				//左按钮
				this.btn_left = document.querySelector(btn_left);
				//右按钮
				this.btn_right = document.querySelector(btn_right);
				//图片li下标
				this.key = 0;
				//圆点li下标
				this.square = 0;
				//定时器
				this.timer = null;
				//左右移动动画
				this.animate = function(ele,target){
					clearInterval(ele.timer);
					var speed = target > ele.offsetLeft ? 10 : -10;
					ele.timer = setInterval(function() {
						var val = target - ele.offsetLeft;
						ele.style.left = ele.offsetLeft + speed + "px";
						if(Math.abs(val) < Math.abs(speed)) {
							ele.style.left = target + "px";
							clearInterval(ele.timer);
						}
					},0)
				}
				
			}
			//往后插入第一张图
			carousel.prototype.ul_appendPic = function(){
				this.new_li = this.ul_liArr[0].cloneNode(true);
				this.ul.appendChild(this.new_li);
			}
			//循环动态添加圆点
			carousel.prototype.add_olLi = function(){
				for(var i = 0;i<this.ul_liArr.length-1;i++){
					this.new_olLi = document.createElement("li");
					this.new_olLi.innerHTML = i+1;
					this.ol.appendChild(this.new_olLi);
				}
				//获取所有圆点
				this.ol_liArr = this.ol.children;
				//给第一个圆点添加激活类
				this.ol_liArr[0].className = "current";
			}			
			//鼠标移入激活圆点，其它圆点移除
			carousel.prototype.mouseover_olLi = function(){
				//获取外部函数的this
				var _this = this;
				for(var i = 0;i<this.ol_liArr.length;i++){
					this.ol_liArr[i].index = i;
					this.ol_liArr[i].addEventListener("mouseenter",function(){
						//this在这里发生改变，需要用上_this，这里的this指向_this.ol_liArr[i]
						//所以在这里this.index == _this.ol_liArr[i].index
						//忘记last_index和now_index怎么用了，先用循环代替
						for(var j = 0;j<_this.ol_liArr.length;j++){
							_this.ol_liArr[j].className = "";
						}
						_this.ol_liArr[this.index].className = "current";
						//图片做动画
						_this.animate(_this.ul,-this.index*_this.ul.children[0].offsetWidth);
						//记录圆点下标和图片下标
						_this.key = _this.square = this.index;
					})
				}
			}
			//左按钮
			carousel.prototype.left = function(){
				//同上
				var _this = this;
				this.btn_left.addEventListener("click",function(){
					//下标--
					_this.key--;
					_this.square--;
					//图片li下标小于0时
					if(_this.key<0){
						//为到倒数第二张做好准备
						_this.key = _this.ul_liArr.length-2;
						//瞬间移动
						_this.ul.style.left = -(_this.ul_liArr.length-1) * _this.ul.children[0].offsetWidth + "px";
					}
					//动画到倒数第二张（不小于0时正常执行动画）
					_this.animate(_this.ul, -_this.key * _this.ul.children[0].offsetWidth);
					//处理圆点
					_this.square = _this.square < 0 ? _this.ol_liArr.length - 1 : _this.square;
					for(var j = 0; j < _this.ol_liArr.length; j++) {
						_this.ol_liArr[j].className = "";
					}
					_this.ol_liArr[_this.square].className = "current";
				})
			}
			//右按钮
			carousel.prototype.right = function(){
				//同上
				var _this = this;
				this.btn_right.addEventListener("click",function(){
					_this.r_go();
				})
			}
			//自动轮播
			carousel.prototype.autoplay = function(){
				//同上
				var _this = this;
				this.timer = setInterval(function(){
					_this.r_go();
				},1000)
			}
			//鼠标移入移出盒子
			carousel.prototype.mouse_box = function(){
				var _this = this;
				this.box.addEventListener("mouseover",function(){
					clearInterval(_this.timer);
				})
				this.box.addEventListener("mouseout",function(){
					_this.autoplay();
				})
			}
			//右按钮功能
			carousel.prototype.r_go = function(){
				this.key++;
				this.square++;
				if(this.key > this.ul_liArr.length-1) {
					//为到第二张做好准备
					this.key = 1;
					//瞬移
					this.ul.style.left = 0;
				}
				//做动画
				this.animate(this.ul, -this.key * this.ul.children[0].offsetWidth);
				//处理圆点
				this.square = this.square > this.ol_liArr.length - 1 ? 0 : this.square;
				for(var j = 0; j < this.ol_liArr.length; j++) {
					this.ol_liArr[j].className = "";
				}
				this.ol_liArr[this.square].className = "current";
			}
			//参数：盒子，左按钮，右按钮
			var fn = new carousel("#all","#left","#right");
			//第一张图插入最后
			fn.ul_appendPic();
			//添加圆点
			fn.add_olLi();
			//移入圆点激活类
			fn.mouseover_olLi();
			//左按钮
			fn.left();
			//右按钮
			fn.right();
			//自动轮播
			fn.autoplay();
			//移入移开盒子
			fn.mouse_box();
		</script>
	</body>

</html>